<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="供应商名称" prop="title">
				<el-input v-model="queryParams.title" placeholder="请输入供应商名称" clearable />
			</el-form-item>
			<el-form-item label="联系方式" prop="mobile1">
				<el-input v-model="queryParams.mobile1" placeholder="请输入联系方式" clearable />
			</el-form-item>
			<el-form-item label="供应商状态" prop="status">
				<el-select v-model="queryParams.status">
					<el-option label="全部" value="" />
					<el-option label="启用" value="1" />
					<el-option label="禁用" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="省市区" prop="area">
				<el-cascader v-model="queryParams.area" :props="shippingAddressProps" placeholder="请选择省市区" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button @click="onAddSupplier" type="primary" plain icon="el-icon-plus">添加供应商</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button @click="onSupplierExport" type="warning" plain icon="el-icon-download">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="供应商ID" align="center" prop="id" />
			<el-table-column label="供应商名称" align="center" prop="title" />
			<el-table-column label="负责人" align="center" prop="name1" />
			<el-table-column label="联系方式" align="center" prop="mobile1" />
			<el-table-column label="供应商状态" align="center" prop="status">
				<template #default="scope">
					{{ scope.row.status == 1 ? '启用' : '禁用' }}
				</template>
			</el-table-column>
			<el-table-column label="创建时间" :formatter="formatTime" align="center" prop="create_time" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onEditSupplier(row)" type="text">修改</el-button>
					<el-button @click="onUploadPic(row)" type="text">上传照片</el-button>
					<el-button @click="onEditBasisInfo(row)" type="text">商户入驻</el-button>
					<!-- <el-button @click="onAddMerchants(row)" type="text">完善商户信息</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<supplier-add-dialog ref="supplierAddRef" />
		<supplier-edit-dialog ref="supplierEditRef" />
		<merchants-add-dialog ref="merchantsAddRef" />
		<upload-pic-dialog ref="uploadPicRef" />
		<edit-basis-info-dialog ref="editBasisInfoRef" />
	</el-card>
</template>

<script lang="ts">
import { reactive, ref, toRefs, onMounted } from 'vue';
import { getAreaList, supplierList, supplierExport, supplierMchidSeleteImg } from '/@/api/admin';
import { ElLoading, ElMessage } from 'element-plus';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { handleDownloadByName } from '/@/utils/utils';
import SupplierAddDialog from './dialog/SupplierAddDialog.vue';
import SupplierEditDialog from './dialog/SupplierEditDialog.vue';
import MerchantsAddDialog from './dialog/MerchantsAddDialog.vue';
import UploadPicDialog from './dialog/UploadPicDialog.vue';
import EditBasisInfoDialog from './dialog/EditBasisInfoDialog.vue';
export default {
	name: 'supplierPage',
	components: { SupplierAddDialog, SupplierEditDialog, MerchantsAddDialog, UploadPicDialog, EditBasisInfoDialog },
	setup() {
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				title: '',
				mobile1: '',
				status: '',
				area: [],
			},
			showSearch: true,
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			tableList: [],
			loading: false,
			total: 0,
			shippingAddressProps: {
				checkStrictly: true,
				lazy: true,
				lazyLoad(node: any, resolve: any) {
					const {
						data: { id },
						level,
					} = node;
					_getAreaList({ id: level ? id : 100000 }, level, resolve);
				},
				value: 'name',
				label: 'name',
			},
		});

		const queryFormRef = ref(null);
		const supplierAddRef = ref(null);
		const supplierEditRef = ref(null);
		const merchantsAddRef = ref(null);
		const uploadPicRef = ref(null);
		const editBasisInfoRef = ref();
		const loadingExportRef = ref(null);

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 导出供应商
		const onSupplierExport = () => {
			(loadingExportRef.value as any) = ElLoading.service({
				lock: true,
				text: '正在导出，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			_supplierExport({
				...state.queryParams,
				province: state.queryParams.area[0],
				city: state.queryParams.area[1],
				county: state.queryParams.area[2],
			});
		};
		// 添加供应商
		const onAddSupplier = () => {
			(supplierAddRef.value as any)?.openDialog({}, () => getList());
		};
		//编辑供应商
		const onEditSupplier = (row: any) => {
			(supplierEditRef.value as any)?.openDialog({ supplier_id: row.id }, () => getList());
		};
		// 上传照片
		const onUploadPic = (row: any) => {
			(uploadPicRef.value as any)?.openDialog({ supplier_id: row.id }, () => getList());
		};
		// 修改基础信息
		const onEditBasisInfo = (row: any) => {
			supplierMchidSeleteImg({ supplier_id: row.id }).then((res) => {
				if (!res.data.list.length) return ElMessage.warning('请先上传图片在进行商户入驻');
				editBasisInfoRef.value.openDialog({ supplier_id: row.id }, () => getList());
			});
		};
		//添加商户信息
		const onAddMerchants = (row: any) => {
			(merchantsAddRef.value as any)?.openDialog({ supplier_id: row.id }, () => getList());
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_supplierList({
				...state.queryParams,
				province: state.queryParams.area[0],
				city: state.queryParams.area[1],
				county: state.queryParams.area[2],
			});
		};
		// 录入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.create_time);
		};

		/********** 网络事件 **********/
		// 导出供应商
		const _supplierExport = (_data: object) => {
			supplierExport(_data)
				.then((res: any) => {
					handleDownloadByName(res.data.info.url, '供应商导出', false);
					(loadingExportRef.value as any)?.close();
				})
				.catch(() => {
					(loadingExportRef.value as any)?.close();
				});
		};
		// 选择省市区
		const _getAreaList = (_data: object, _level: number, resolve: any) => {
			getAreaList(_data).then((res: any) => {
				console.log('选择省市区', res);
				let nodes = res.data.list.map((item: any) => ({
					id: item.id,
					name: item.name,
					leaf: _level >= 2,
				}));
				resolve(nodes);
			});
		};
		const _supplierList = (params: any) => {
			supplierList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};

		return {
			queryFormRef,
			supplierAddRef,
			supplierEditRef,
			uploadPicRef,
			editBasisInfoRef,
			merchantsAddRef,
			onQuery,
			onResetQuery,
			onAddSupplier,
			onEditSupplier,
			onUploadPic,
			onEditBasisInfo,
			onAddMerchants,
			onSupplierExport,
			getList,
			formatTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
